import React, {useState} from 'react';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import {AppBar, Tabs, Tab, Container, Typography, Grid, InputAdornment, IconButton, Button} from '@mui/material';
import {Home, People, Map, House, Room} from '@mui/icons-material';
import {useLocation, useNavigate, useParams} from 'react-router-dom';
import {Card, CardMedia,} from '@mui/material';
import {CardContent} from '@mui/material';
import AddLocationAltIcon from '@mui/icons-material/AddLocationAlt';
import NotListedLocationOutlinedIcon from '@mui/icons-material/NotListedLocationOutlined';
import NearMeOutlinedIcon from '@mui/icons-material/NearMeOutlined';
import ShareLocationOutlinedIcon from '@mui/icons-material/ShareLocationOutlined';
import SearchBox from "../SearchBox/SearchBox";


function IndexPage() {
    const [value, setValue] = useState(-1);

    const navigate = useNavigate();

    const location = useLocation();
    const selectedCity = location.state?.selectedCity;

    console.log(selectedCity)

    // 轮播图样式
    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 3000,
        appendDots: (dots: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | null | undefined) => (
            <div style={{position: 'absolute', bottom: '10px', width: '100%', textAlign: 'center'}}>
                <ul style={{margin: '0', padding: '0', display: 'inline-block'}}>{dots}</ul>
            </div>
        ),
        arrows: false,
    };

    const handleChange = (event: any, newValue: React.SetStateAction<number>) => {
        // @ts-ignore
        setValue(newValue);
        console.log(newValue)
        // 添加路由导航
        switch (newValue) {
            case 0:
                console.log(newValue)
                navigate('/searchHouse');
                break;
            case 1:
                navigate('/searchHouse');  // 你需要修改为 '/searchRoom' 或者其他适当的路径
                break;
            case 2:
                navigate('/mapSearch');
                break;
            case 3:
                navigate('/rent');
                break;
            default:
                break;
        }
    };

    let imageUrls = [{
        id: 1,
        imgSrc: "https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF",
        alt: ""
    },
        {
            id: 2,
            imgSrc: "https://t7.baidu.com/it/u=727460147,2222092211&fm=193&f=GIF",
            alt: ""
        },
        {
            id: 3,
            imgSrc: "https://t7.baidu.com/it/u=655876807,3707807800&fm=193&f=GIF",
            alt: ""
        }
    ];

    // 假设你的后端数据格式为一个包含文字和图片URL的数组
    const dataFromBackend = [
        {
            id: 1,
            text1: '家住回龙观',
            text2: '归属的感觉',
            imgUrl: 'https://t7.baidu.com/it/u=655876807,3707807800&fm=193&f=GIF'
        },
        {
            id: 2,
            text1: '三街打工仔',
            text2: '打工人打工魂',
            imgUrl: 'https://t7.baidu.com/it/u=655876807,3707807800&fm=193&f=GIF'
        },
        {
            id: 3,
            text1: '傲居龙湖',
            text2: '泛溪繁华处',
            imgUrl: 'https://t7.baidu.com/it/u=655876807,3707807800&fm=193&f=GIF'
        },
        {
            id: 4,
            text1: '东门大佬',
            text2: '夜跑龙泉山',
            imgUrl: 'https://t7.baidu.com/it/u=655876807,3707807800&fm=193&f=GIF'
        },
        // ... 其他数据项
    ];

    // 假设你的最新咨询数据格式为一个包含图片、房屋简介、来源和发布时间的数组
    const latestNewsData = [
        {
            id: 1,
            imgUrl: 'https://img0.baidu.com/it/u=1772235367,3530910249&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333',
            houseIntro: '置业首选 | 龙湖上城 三室一厅 河间的典雅别院',
            source: '链家',
            publishTime: '2022-01-01',
        },
        {
            id: 2,
            imgUrl: 'https://img0.baidu.com/it/u=1772235367,3530910249&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333',
            houseIntro: '高端定制 | 豪华四室复式别墅，私人花园，打造尊贵生活',
            source: '贝壳找房',
            publishTime: '2022-01-02',
        },
        {
            id: 3,
            imgUrl: 'https://img0.baidu.com/it/u=1772235367,3530910249&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333',
            houseIntro: '独具品味 | 欧洲风情豪宅，华丽三居室，紧邻市中心的宁静居所',
            source: '好家帮',
            publishTime: '2022-01-01',
        },
        {
            id: 4,
            imgUrl: 'https://img0.baidu.com/it/u=1772235367,3530910249&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333',
            houseIntro: '山水园林 | 山景别墅，独栋独院，尽显自然之美',
            source: '家家乐',
            publishTime: '2022-01-02',
        },
        // ... 其他数据项
    ];


    return (
        // paddingBottom解决底部tabbar遮挡文本流问题
        <div style={{paddingBottom: '90px'}}>
            <div style={{position: 'relative'}}>
                {/* 轮播图 */}
                <div style={{padding: '0px', position: 'relative'}}>
                    {imageUrls.length > 0 ? (
                        <Slider {...settings}>
                            {imageUrls.map(image => (
                                <div key={image.id}>
                                    <img src={image.imgSrc} alt={image.alt} style={{width: '100%'}}/>
                                </div>
                            ))}
                        </Slider>
                    ) : (
                        <p>Loading...</p>
                    )}
                </div>

                <div>
                    {/* 搜索框 */}
                    <SearchBox selectedCity={selectedCity}/>
                </div>


            </div>

            {/*导航栏*/}
            <div>
                <AppBar position="static" color="transparent" elevation={0}>
                    <Container style={{display: 'flex', justifyContent: 'center'}}>
                        <Tabs value={value} onChange={handleChange} indicatorColor="primary" textColor="primary">
                            <Tab icon={<Home/>} label={<Typography variant="caption">整租</Typography>}/>
                            <Tab icon={<People/>} label={<Typography variant="caption">合租</Typography>}/>
                            <Tab icon={<AddLocationAltIcon/>}
                                 label={<Typography variant="caption">地图找房</Typography>}/>
                            <Tab icon={<House/>} label={<Typography variant="caption">去出租</Typography>}/>
                        </Tabs>

                    </Container>
                </AppBar>
            </div>


            <div style={{backgroundColor: '#f5f1f1'}}>
                <Container
                    style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '10px'}}>
                    {/* 左侧文字“租房小组“ */}
                    <div style={{textAlign: 'left'}}>
                        <Typography variant="subtitle1">租房小组</Typography>
                    </div>
                    {/* 右侧“更多” */}
                    <div>
                        <Typography variant="subtitle1">更多</Typography>
                    </div>

                </Container>

                {/* 租房小组下面的九宫格 */}
                <Container>
                    <div>
                        {/* 租房小组下面的九宫格 */}
                        <Grid container spacing={3}>
                            {dataFromBackend.map(item => (
                                <Grid item xs={6} sm={6} md={4} lg={3} key={item.id}>
                                    <Card style={{boxShadow: 'none'}}>
                                        {/* Grid 容器，水平布局 */}
                                        <Grid container spacing={1}>
                                            {/* 文字部分 */}
                                            <Grid item xs={6}>
                                                <Typography variant="subtitle2">{item.text1}</Typography>
                                                <Typography variant="subtitle2">{item.text2}</Typography>
                                            </Grid>
                                            {/* 图片部分 */}
                                            <Grid item xs={6}>
                                                <CardMedia
                                                    component="img"
                                                    alt={item.text1}
                                                    height="50"
                                                    image={item.imgUrl}
                                                />
                                            </Grid>
                                        </Grid>
                                    </Card>
                                </Grid>
                            ))}
                        </Grid>
                        <div>
                            <br/>
                        </div>
                    </div>
                </Container>
            </div>

            <div>
                <Container
                    style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '10px'}}>
                    {/* 左侧文字“最新咨询“ */}
                    <div style={{textAlign: 'left'}}>
                        <Typography variant="subtitle1">最新咨询</Typography>
                    </div>
                </Container>
                <Container>
                    {/* 最新咨询列表 */}
                    <Grid container spacing={2}>
                        {latestNewsData.map(item => (
                            <Grid item xs={12} md={6} lg={4} key={item.id}>
                                <Card>
                                    <Grid container>
                                        {/* 左侧图片 */}
                                        <Grid item xs={6}>
                                            <CardMedia
                                                component="img"
                                                alt="House Image"
                                                height="140"
                                                image={item.imgUrl}
                                            />
                                        </Grid>
                                        {/* 右侧房屋简介、来源和发布时间 */}
                                        <Grid item xs={6}>
                                            <CardContent style={{position: 'relative'}}>
                                                {/* 房屋简介 */}
                                                <Typography variant="subtitle1">{item.houseIntro}</Typography>
                                                {/* 来源和发布时间 */}
                                                <div style={{position: 'absolute', bottom: 0, right: 0}}>
                                                    <Typography variant="caption" color="textSecondary">
                                                        <span>{item.source}</span>
                                                        &nbsp;•&nbsp;
                                                        <span>{item.publishTime}</span>
                                                    </Typography>
                                                </div>
                                            </CardContent>
                                        </Grid>
                                    </Grid>
                                </Card>
                            </Grid>
                        ))}
                    </Grid>
                </Container>
            </div>

        </div>


    );
}

export default IndexPage;
